<script>
import BackTop from './backTop.vue'
const mockdata = {
  code: 0,
  data: {
    authorizationPhone: true,
    newCustomer: true,
    nickName: '测试1',
    wecomuserNelfareRecordVoList: [
      {
        couponName: '小程序619活动优惠卷',
        receiveTime: '2022-05-22 19:43:05',
        sendTime: '2022-05-22 19:43:05',
        status: '1'
      },
      {
        couponName: '卡号密码链接',
        receiveTime: '2022-05-22 19:43:05',
        sendTime: '2022-05-22 19:43:05',
        status: '1'
      },
      {
        couponName: '卡券＋密码1',
        receiveTime: '2022-05-22 19:43:05',
        sendTime: '2022-05-22 19:43:05',
        status: '1'
      },
      {
        receiveTime: '2022-05-22 19:43:05',
        sendTime: '2022-05-22 19:43:05',
        status: '1'
      },
      {
        couponName: '福利a88',
        receiveTime: '2022-05-22 19:43:05',
        sendTime: '2022-05-22 19:43:05',
        status: '1'
      },
      {
        receiveTime: '2022-05-22 19:43:05',
        sendTime: '2022-05-22 19:43:05',
        status: '1'
      },
      {
        receiveTime: '2022-05-22 19:43:05',
        sendTime: '2022-05-22 19:43:05',
        usedTime: '2022-05-23 19:43:05',
        status: '2'
      }
    ]
  },
  message: '成功'
}
export default {
  name: 'userBh',
  components: {
    BackTop
  },
  data() {
    return {
      authorizationPhone: true,
      newCustomer: true,
      nickName: '',
      wecomuserNelfareRecordVoList: []
    }
  },
  methods: {
    formactDate(time = '') {
      if (time) {
        time = time.slice(0, -3)
      } else {
        time = 'X'
      }
      return time
    },
    getUserBhHandle() {
      const data = mockdata.data
      this.authorizationPhone = data.authorizationPhone
      this.newCustomer = data.newCustomer
      this.nickName = data.nickName
      this.wecomuserNelfareRecordVoList = [
        ...data.wecomuserNelfareRecordVoList,
        ...data.wecomuserNelfareRecordVoList,
        ...data.wecomuserNelfareRecordVoList
      ]
    }
  },
  created() {
    this.getUserBhHandle()
  }
}
</script>

<template>
  <div class="bh-container">
    <div class="cus-name">
      <h2>{{ nickName }}</h2>
      <div>
        <van-button type="default" size="mini">{{ newCustomer ? '新客户' : '旧客户' }}</van-button>
        <van-button type="default" size="mini" v-if="authorizationPhone" style="margin-left: 16px"
          >已授权手机号</van-button
        >
      </div>
    </div>
    <h2 class="title-part">
      <span class="sign"></span>
      福利记录
    </h2>
    <div class="underline">展示近6个月数据</div>
    <section class="section-list">
      <div class="card-item" v-for="(item, index) of wecomuserNelfareRecordVoList" :key="index">
        <p>{{ item.couponName }}</p>
        <div class="status-wrap">
          <span class="status" :class="{ active: item.sendTime }">发送</span>
          <span class="line"></span>
          <span class="status" :class="{ active: item.receiveTime }">领取</span>
          <span class="line"></span>
          <span class="status" :class="{ active: item.usedTime }">使用</span>
        </div>

        <div class="status-wrap time">
          <span>
            {{ formactDate(item.sendTime) }}
          </span>
          <span>
            {{ formactDate(item.receiveTime) }}
          </span>
          <span>
            {{ formactDate(item.usedTime) }}
          </span>
        </div>
      </div>
      <h2 v-if="!wecomuserNelfareRecordVoList.length">暂无数据</h2>
    </section>
    <BackTop />
  </div>
</template>
<style>
.bh-container {
  color: #000;
  background-color: #f9f9f9;
  height: 100vh;
  padding-top: 16px;
}
.cus-name {
  box-sizing: border-box;
  margin: 0 16px 16px 16px;
  border-radius: 5px;
  background-color: #fff;
  min-height: 90px;
  padding: 10px;
}
.cus-name h2 {
  margin: 0;
  font-size: 14px;
  margin-bottom: 16px;
}

.title-part {
  font-size: 17px;
  display: flex;
  align-items: center;
  margin: 14px 0 0;
}
.title-part .sign {
  display: inline-block;
  width: 3px;
  height: 1em;
  background-color: #797979;
  margin-right: 4px;
}
.underline {
  margin-top: -8px;
  border-bottom: 1px solid #dedede;
  text-align: right;
  font-size: 12px;
  color: #cacaca;
  padding: 0 10px 5px 10px;
}

.section-list {
  padding: 16px;
}
.section-list .card-item {
  box-sizing: border-box;
  border-radius: 5px;
  background-color: #fff;
  margin-bottom: 16px;
  padding: 8px 6px;
  min-height: 90px;
}
.section-list .card-item p {
  margin: 0;
  margin-bottom: 8px;
  font-size: 14px;
}
.section-list h2 {
  color: #ccc;
  text-align: center;
  margin-top: 40px;
}

.status-wrap {
  display: flex;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 6px 0;
}
.status-wrap .status {
  font-size: 15px;
  font-weight: 600;
  width: 80px;
  color: #ccc;
}
.status-wrap .status.active {
  color: #000;
}
.status-wrap .line {
  height: 1px;
  background-color: #bbb;
  width: 17%;
  margin: 0 -15px;
}
.status-wrap.time span {
  font-size: 12px;
  color: #ccc;
  width: 80px;
}
</style>
